<template>
  <div class="read-excel-file container-page">
    <div class="left">
      <el-file-upload @onchange="uploadFile"></el-file-upload>
      <div class="button-content">
        <el-button @click="format" style="margin-right: 6px"
          >格式处理</el-button
        >
        <el-button @click="plugin" style="margin-right: 6px"
          >导出Excel</el-button
        >
        <el-button @click="clear">清除</el-button>
      </div>
    </div>
    <div class="right">
      <json-view
        :data="tableJson"
        :closed="false"
        icon-style="square"
        style="height: 100%"
      />
    </div>
  </div>
</template>

<script>
import readXlsxFile from "read-excel-file";
import jsonView from "vue-json-views";
export default {
  components: {
    jsonView,
  },
  data() {
    return {
      worklist: [], // 工序
      rows: null, // 处理前格式
      table: [], // 处理后
      tableJson: {
        table: [],
      },
    };
  },
  methods: {
    clear() {
      this.tableJson.table = [];
    },
    uploadFile(files) {
      const file = files;
      console.log(file);
      readXlsxFile(file).then((rows) => {
        this.worklist = rows[0];
        this.rows = rows;
      });
    },
    format() {
      if (this.rows && this.worklist) {
        console.log(this.worklist, "worklist");
        console.log(this.rows, "rows");
        const data = [];
        try {
          this.worklist.forEach((item, index) => {
            if (item) {
              for (let i = 1; i < this.rows.length; i++) {
                const row = this.rows[i];
                if (row[index]) {
                  data.push({
                    uuid: row[0],
                    name: row[1],
                    work: this.worklist[index],
                    grade: row[index],
                  });
                }
              }
            }
          });
        } catch (e) {
          //TODO handle the exception
          console.log("文件格式出现错误");
        }
        console.log(data);
        this.tableJson.table = data;
        this.table = data;
      } else {
        console.log("请先上传文件");
      }
    },
    plugin() {
      if (this.table.length > 0) {
        console.log(this.table);
        const columns = [
          {
            label: "工号",
            prop: "uuid",
          },
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "工序",
            prop: "work",
          },
          {
            label: "技能掌握",
            prop: "grade",
          },
        ];
        const data = this.table;
        this.$export
          .excel({
            columns,
            data,
          })
          .then(() => {
            console.log("导出成功");
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.read-excel-file {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-right: 1px solid #d9d9d9;

    .button-content {
      margin-top: 16px;
    }
  }

  .right {
    flex: 1;
    height: 100%;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
      mini-height: 15px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #b7bdc8;
    }
  }
}
</style>
